<template>
  <!--接种列表-->
  <div style="margin-top: 30px;">
  <el-table :data="vaccinateDate" style="width: 100%" height="350">
    <el-table-column fixed prop="id" label="序号" width="80" />
    <el-table-column prop="userid" label="身份证号" width="140" />
    <el-table-column prop="vaccinid" label="疫苗编号" width="120" />
    <el-table-column prop="jabsum" label="接种针数" width="100" align="center"/>
    <el-table-column prop="reservationid" label="预约编号" width="200" align="center"/>
    <el-table-column prop="jabtime" label="接种时间" width="180" align="center"/>

    <el-table-column fixed="right" label="操作" width="100">
      <template #default="scope">
        <el-button
          type="warning"
          size="small"
          @click="readnotice(scope.row)"
          >查看详情</el-button
        >
      </template>
    </el-table-column>
  </el-table></div>
  <!-- 查看的弹窗 -->
  <el-dialog
    v-model="dialogVisible"
    width="50%"
  >
    <h3>身份证号:<p>{{ form.userid}}</p></h3><h3>姓名:<p>{{ form.user.name }}</p></h3>
    <h3>疫苗编号:<p>{{ form.vaccinid}}</p></h3><h3>疫苗名称:<p>{{ form.vaccin.vname }}</p></h3>
    <h3>疫苗生产厂家:<p>{{ form.vaccin.maker }}</p></h3>
    <h3>疫苗生产时间:<p>{{ form.vaccin.createtime }}</p></h3>
    <h3>疫苗等级:<p>{{  form.vaccin.vrank }}</p></h3><h3>疫苗类别:<p>{{ form.vaccin.vsort  }}</p></h3>
    <h3>需接种针数:<p>{{ form.vaccin.vjab  }} </p></h3><h3>此次接种针数:<p>{{ form.jabsum }}</p></h3>
    <h3>接种时间:<p>{{ form.jabtime }}</p> </h3><h3>接种预约序号:<p>{{ form.reservationid }}</p></h3>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "Order",
  data() {
      return {
        UserDate: [],
        total: 0, //数据总条数
        pageNum: 1, //当前页
        pageSize: 10, //页大小
        userid: 0 ,
        vaccinateDate: [],
        dialogVisible : false,
        form: {},
        localinfo:"https://img1.baidu.com/it/u=1056497728,1432074733&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
      }
      },
    methods: {
      getuserDate() {
      //获取当前用户名和头像用*分隔开
      let token = localStorage.getItem("token");
      this.$http.post("/inoculations/user/getTokenId",token).then((res) => {
        if (res.statusCode == "200") {
          this.UserDate = res.data;
          this.userid = res.data.idcard;
          this.getvaccinateAll();
        }
      }).catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    },
    //查看
  readnotice(row) {
    this.form = row;
    this. dialogVisible = true;
  },
    // 获取用户接种信息
    getvaccinateAll() {
    this.$http
      .get(
        "/inoculations/inoculation/pageall",
        {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            userid: this.userid,
          },
        }
      )
      .then((res) => {
        if (res.statusCode == "200") {
          this.total = res.data.total;
          this.vaccinateDate = res.data.records;
          // console.log(res.data.records);
      
        }
      })
      .catch(() => {
        ElMessage.error("数据加载失败,请刷新！");
      });
  },
    
  },
  created() {
    this.getuserDate();
    
    }
    
}
</script>

<style scoped>
p {
  color: #6495ED;
  margin-left: 5px;
  display:inline;
}
</style>